<template>
  <div>
    <div class="top">
      <van-icon @click="goback" class="zuo" name="arrow-left" />
      注册用户
    </div>
    <van-cell-group border>
      <van-field
        v-model="yzm"
        label="验证码"
        placeholder="请输入验证码.."
        autofocus
      >
        <template #button>
          <van-button
            size="small"
            :disabled="btnFlag"
            type="primary"
            @click="sendMsg"
            >{{ txt }}</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
    <div class="loginBtn">
      <van-button type="danger" round block :disabled="flag" @click="next"
        >下一步</van-button
      >
    </div>
  </div>
</template>
  
  <script>
import { getyzm, setyzm } from "../../api/login";
import { Toast } from "vant";
export default {
  data() {
    return {
      yzm: "",
      txt: "发送验证码",
      time: 60,
      btnFlag: false,
    };
  },
  methods: {
    goback() {
      this.$router.back();
    },
    sendMsg() {
      //  效果上是倒计时
      const timer = setInterval(() => {
        this.time--;
        if (this.time == 0) {
          clearInterval(timer);
          this.btnFlag = false;
          this.txt = "发送验证码";
          this.time = 60;
        } else {
          this.txt = this.time + "s后发送验证码";
          this.btnFlag = true;
        }
      }, 1000);

      // 实际上 真实也需要发
      setTimeout(() => {
        getyzm({ tel: localStorage.getItem("tel") }).then((res) => {
          console.log(res.data.data);
          this.yzm = res.data.data;
        });
      }, 1500);
    },
    next() {
      // 验证验证码
      setyzm({ tel: localStorage.getItem("tel"), telcode: this.yzm }).then(
        (res) => {
          console.log(res.data.code);

          switch (res.data.code) {
            case "10007":
              Toast("验证码有误,请重新输入");
              break;
            case "200":
              this.$router.push("/Reg2?tel=" + localStorage.getItem("tel"));
              break;
            default:
              break;
          }
        }
      );
    },
  },
  computed: {
    flag() {
      if (/^\d{5}$/.test(this.yzm)) {
        return false; //红色
      } else {
        return true; //  灰色禁用
      }
    },
  },
};
</script>
  
  <style scoped>
.loginBtn {
  width: 80%;
  margin: 20px auto;
}
.top {
  width: 100%;
  height: 3.125rem;
  font-size: 1.25rem;
  text-align: center;
  line-height: 3.125rem;
  /* border-bottom: 0.0625rem solid black; */
  position: relative;
  background-color: red;
}
.zuo {
  position: absolute;
  left: 0.625rem;
  font-size: 1.25rem;
  top: 0.9375rem;
}
</style>